<template>
  <div>
    <div v-if="searchStatus" class="box-shadow pad10 mgb10 flex jbetween">
      <div>
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          label-width="70px"
          class="fnmb talj"
        >
          <el-form-item label="单据号">
            <el-input
              v-model="queryParams.Order"
              placeholder="请输入"
              clearable
              style="width: 212px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input
              v-model="queryParams.Name"
              placeholder="请输入"
              clearable
              style="width: 212px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="授课形式">
            <el-select
              v-model="queryParams.Mode"
              clearable
              placeholder="请选择"
              style="width: 212px"
            >
              <el-option label="理论" value="理论" />
              <el-option label="实操" value="实操" />
            </el-select>
          </el-form-item>
          <el-form-item label="授课教师">
            <Selector
              v-model="queryParams.Teacher"
              style="width: 212px"
              category="用户列表"
              :query="{
                Type: 2
              }"
            ></Selector>
          </el-form-item>
          <el-form-item label="开始时间">
            <MyDateTime v-model="queryParams.StartTime"></MyDateTime>
          </el-form-item>
          <el-form-item label="结束时间">
            <MyDateTime v-model="queryParams.EndTime"></MyDateTime>
          </el-form-item>
          <el-form-item label="教学场地">
            <Selector
              v-model="queryParams.Place"
              style="width: 212px"
              category="场地级联"
              cascader="级联"
            ></Selector>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex acenter jend fnw">
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <MyTable
      :tableList="tableList"
      :total="Total"
      :columns="columns"
      v-model:page="page"
      v-model:searchStatus="searchStatus"
      :btnList="[]"
      :customBtn="[{ name: '评价' }]"
      @getList="getList"
      @custom="handleCustom"
      @link="handleLink"
    >
      <template v-slot:tabTop>
        <el-button
          type="primary"
          v-hasPermi="['TalkEvaluation:add']"
          icon="CirclePlusFilled"
          >添加区域</el-button
        >
      </template>
    </MyTable>
    <MyDialog
      v-model:show="show"
      :title="title"
      :formRef="formRef"
      :width="500"
      @confirm="SubmitComment"
    >
      <el-form
        :model="formData"
        :rules="rules"
        inline
        ref="formRef"
        class="wid100"
      >
        <el-form-item prop="Comment">
          <el-input
            v-model="formData.Comment"
            placeholder="请输入评语"
            type="textarea"
            :autosize="{ minRows: 6 }"
            clearable
          />
        </el-form-item>
        <el-form-item label="评分" prop="Score">
          <el-rate v-model="formData.Score" allow-half />
        </el-form-item>
      </el-form>
    </MyDialog>
    <!-- 详情 -->
    <MyDialog
      v-model:show="ShowCourseDetail"
      title="课程详情"
      :width="1000"
      :showFooter="false"
    >
      <CourseDeveDetail :DetailData="CourseDetailData" />
    </MyDialog>
  </div>
</template>

<script setup name="TalkEvaluation">
import { ref, getCurrentInstance, onMounted } from 'vue';
import {
  Evaluate,
  GetDevCourseEvaluateList_Page,
  GetDevCourseDetail
} from '@/api/lesson/lessonDev.js';
import CourseDeveDetail from '@/views/lesson/Development/CourseDeveDetail';
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const Total = ref(0);
const columns = ref([
  { label: '序号' },
  { label: '单据号', prop: 'Order', link: true },
  { label: '课程名称', prop: 'Name' },
  { label: '授课形式', prop: 'Mode' },
  { label: '授课教师', prop: 'Name_Teacher' },
  { label: '试讲日期', prop: 'TryTime_Start' },
  { label: '评价状态', prop: 'tags', tag: true },
  { label: '操作', width: 160 }
]);
proxy.$formatKey(columns.value);
const page = ref({
  PageIndex: 1,
  PageSize: 10
});
const searchStatus = ref(true);
const queryParams = ref({
  Order: '',
  Name: '',
  Mode: '',
  Teacher: '',
  StartTime: '',
  EndTime: '',
  Place: '',
  NoPage: ''
});
const queryRef = ref();
const show = ref(false);
const title = ref();
const formRef = ref();
const rules = ref({
  Score: [{ required: true, message: '请选择', trigger: 'change' }],
  Comment: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const formData = ref({});
const CourseDetailData = ref({});
const ShowCourseDetail = ref(false);

onMounted(() => {
  getList();
});

async function SubmitComment(val) {
  if (val) {
    try {
      let query = {
        ...formData.value
      };
      await Evaluate(query);
      proxy.$modal.msgSuccess('提交成功');
      getList();
      show.value = false;
    } catch (error) {
      console.log(error);
    }
  }
}
async function getList() {
  try {
    let query = {
      ...queryParams.value,
      ...page.value
    };
    let res = await GetDevCourseEvaluateList_Page(query);

    res.data.List?.forEach(item => {
      item.tags = [
        {
          name: item.HasGrade ? '已评价' : '未评价',
          type: item.HasGrade ? 'sccusse' : 'danger'
        }
      ];
    });
    tableList.value = res.data.List;
    Total.value = res.data.Total;
  } catch (error) {
    console.log(error);
  }
}

async function handleLink(row) {
  try {
    let res = await GetDevCourseDetail({ ID: row.ID });
    let UserType = {
      1: '学生',
      2: '职员',
      3: '管理员'
    };
    res.data?.Participants?.forEach(item => {
      item.TypeName = UserType[item.Type];
    });
    CourseDetailData.value = res.data;
    ShowCourseDetail.value = true;
  } catch (error) {
    console.log(error);
  }
}

function handleCustom(row) {
  title.value = row.Name;
  formData.value.ID = row.ID;
  show.value = true;
}

function handleQuery() {
  page.value.PageIndex = 1;
  getList();
}
function resetQuery() {
  queryParams.value = {
    Code: '',
    Name: '',
    NoPage: ''
  };
  handleQuery();
}
</script>

<style lang="scss" scoped>
:deep(.el-rate__item) {
  height: 20px;
}
</style>
